import React,{Component,PropTypes} from 'react';
import {redirect,backward} from 'lib/utils';
import OssUpload from "components/OssUpload";

import {Form, Button} from 'antd';
const FormItem = Form.Item;
import './style.less';

/*     编辑状态数据模拟   Object {img: "banner.png, banner.png"} */
import banner from 'images/banner.png';
const initData = { img:`${banner+","+banner}` };


class PhotoAlbum extends Component{
    constructor(props){
        super(props);

        this.state={
            hasImg:true ,       // 有图片
        }
    };



    componentDidMount(){
        // 编辑状态
        if(this.props.id){
            // API.fetch("",{id:id},resp=>{
                this.props.form.setFieldsValue(initData);       // 初始数据
                this.setState({img:initData.img, hasImg:true})  // 图片显示

            // });
        };
    };

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }else {
                //  必传图片的错误信息提示,是否显示
                if(err.img){
                    this.setState({hasImg:false})
                }else{
                    this.setState({hasImg:true})
                }
            }
        });
    };

    handlerPic(field){
        this.props.form.setFieldsValue({
            img: field
        });

        // ++ 图片上传操作后,对错误信息提示的处理
        let hasImg = false
        field?hasImg = true:null

        this.setState({
            img:field,
            hasImg:hasImg
        });
    }


    render(){
        const { getFieldDecorator } = this.props.form;
        const {hasImg} = this.state;


        return(
            <Form onSubmit={this.handleSubmit} >
                <FormItem style={{marginBottom:6}}>
                    {getFieldDecorator('img', {
                        rules: [{ required: true, message: ' ' }],
                    })(
                        <OssUpload default={this.state.img}
                                   onFieldSet={this.handlerPic.bind(this)}
                                   multiple={true}
                                   lable="封面图"
                        />
                    )}
                </FormItem>

                {/*  原有图片上传的必填提示信息,位置不好修改所以另起一行做提示  */}
                <div className="ant-row ant-form-item oss-upload_elem" style={{visibility:hasImg?"hidden":"visible"}}>
                    <label className="ant-form-item-label ant-col-sm-2">  </label>
                    <div className="ant-col-8 ant-form-item-control-wrapper" style={{color: "#f04134"}}>请选择图片</div>
                </div>


                <FormItem wrapperCol={{ span: 8, offset: 4 }} >
                    <Button type="primary" htmlType="submit"> 保存 </Button>
                </FormItem>
            </Form>
        )
    }
};

export default Form.create()(PhotoAlbum);